<template>
  <div>
    <div class="chart-period-setting">
      <el-tooltip
        class="chart-tooltip"
        effect="dark"
        content="设置可选择为 N小时 ，图表根据其统计备件满足的周期。例如统计48小时内备件满足的比率。"
        placement="bottom"
      >
        <i class="iconfont icon-jieshishuoming1"></i>
      </el-tooltip>
      <el-button @click="showDialog">满足周期设置</el-button>
      <chart-download 
			:chart-type="chartType"/>
    </div>

    <!-- 满足周期设置弹出框 -->
    <el-dialog
      title="设置满足周期"
      :visible.sync="dialogVisible"
      width="648px"
      class="close-dialog"
    >
      <div>
        <el-form
          :model="closeForm"
          ref="closeFormRef"
          
          label-position="top"
        >
          <el-form-item label="设置报表计算周期">
            <el-input
              maxlength="4"
              v-model="closeForm.day"
              v-only-number="{ max: 9999, min: 0, precision: 1 }"
            ></el-input>
            <span>小时</span>
            <div>注：小数点后可输入1位，4字符以内。</div>
          </el-form-item>
        </el-form>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
        <el-button @click="save" type="primary">保存 </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { ref, computed } from 'vue';
import Platform from '@src/util/platform.ts';
import ChartDownload from './ChartDownload';

export default {
  name: 'chart-satisfied-period-setting',
  props: {
    chartOption: {
      type: Object,
    },
    chartType: {
      type: String,
      default: ''
    }
  },
  setup(props, { emit }) {

    const closeForm = ref({
      day: ''
    })

    const dialogVisible = ref(false) 

    const showDialog = () => {
      dialogVisible.value = true
      closeForm.value.day = props.chartOption?.satisfyCycle || ''
    }

    const validate = () => {
      let valid = true
      if (!closeForm.value.day) {
        Platform.alert('输入框不能为空')
        valid = false
      }

      if (String(closeForm.value.day).indexOf('.') > -1) {
        const pointPosition = String(closeForm.value.day).indexOf('.') + 1
        const amount = String(closeForm.value.day).length - parseInt(pointPosition)
        if (amount > 1) {
          Platform.alert('小数点后可输入1位')
          valid = false
        }
      }
      
      return valid
    }

    const save = () => {
      const valid = validate()
      if (valid) {
        dialogVisible.value = false
        const newValue = {
          ...props.chartOption,
          satisfyCycle: closeForm.value.day
        }
        emit('fetchChartData', newValue)
      }
    }

    return {
      dialogVisible,
      closeForm,
      showDialog,
      save
    }
  },
  components: {
    [ChartDownload.name]: ChartDownload,
  }
};
</script>

<style lang="scss" scoped>
.chart-period-setting {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  i {
    color: #afb5b3;
  }

  .el-button {
    width: 120px;
    margin-left: 10px;
    margin-right: 2%;
  }
}
.close-dialog {
  .el-input {
    width: 80px;
    margin: 0 10px;
  }

  i {
    margin: 0 -5px 0 10px;
    font-size: 18px;
    cursor: pointer;
    color: #f56c6c;
  }
}
</style>
